{% extends 'base.html' %}

{% block body %}

<!-- ===== Alert Messages ===== -->
{% for message in messages %}
<div class="alert alert-success alert-dismissible fade show shadow-sm mt-3 mx-3" role="alert">
    <strong>{{ message }}</strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}

<!-- ===== All Bookings Section ===== -->
<div class="container my-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="fw-bold text-success mb-0">
            <i class="bi bi-calendar-check"></i> All Bookings
        </h3>
        <span class="badge bg-success fs-6 p-2 shadow-sm">Total Revenue: ₹{{ income }}</span>
    </div>

    <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-success text-center text-dark">
                    <tr>
                        <th>Name of Booking</th>
                        <th>Mobile Number</th>
                        <th>Start Date & Time</th>
                        <th>End Date & Time</th>
                        <th>Total Amount (₹)</th>
                    </tr>
                </thead>
                <tbody class="text-center">
                    {% for b in all_booking %}
                    <tr>
                        <td class="fw-semibold text-dark">{{ b.name }}</td>
                        <td>{{ b.phone }}</td>
                        <td>{{ b.start_time }}</td>
                        <td>{{ b.end_time }}</td>
                        <td class="fw-bold text-success">₹{{ b.total }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if not all_booking %}
    <div class="text-center mt-4">
        <h5 class="text-muted"><i class="bi bi-info-circle"></i> No bookings found yet.</h5>
    </div>
    {% endif %}
</div>

<!-- ===== Custom CSS ===== -->
<style>
    body {
        background-color: #f8f9fa;
    }

    table {
        border-collapse: separate;
        border-spacing: 0 0.5rem;
    }

    thead th {
        font-weight: 600;
        background: #d1e7dd;
    }

    tbody tr {
        background-color: #fff;
        transition: all 0.3s ease;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    }

    tbody tr:hover {
        background-color: #e9f7ef;
        transform: scale(1.01);
    }

    .card {
        border-radius: 20px;
    }

    .table th, .table td {
        vertical-align: middle;
        padding: 1rem;
    }

    .badge {
        border-radius: 10px;
    }

    @media (max-width: 768px) {
        table {
            font-size: 0.9rem;
        }
    }
</style>

{% endblock body %}